<template>
  <div class="detailData" v-if="divShow">
    <!-- headerContent 头部信息对象 -->
    <!-- headerNumber 头部展示主指标值 -->
    <!-- dimContent 主指标logicCode集合 -->
    <!-- titleDimContent 下钻指标集合 -->
    <!-- secondaryContent 参考系指标展示集合 -->
    <!-- titleContent 维度名称列表 -->
    <baseData
      :header="headerContent"
      :headerNumber="headerNumber"
      :dataType="headerNumberDataType"
      :dimContent="dimContent"
      :titleDimContent="curData.titleDim"
      :secondaryContent="secondaryContent"
      :baseTitleName="baseTitleName"
      :operation="curData.operation"
      :tendencyXAxisData="tendencyXAxisData"
      :tendencySeriesData="tendencySeriesData"
      :UnitLevel="UnitLevel"
      :dateType="curData.dateType"
      :echartsRadarData="curData.echartsRadarData"
      @modifyPopup="handleModifyPopup"
      @tendencyDateChange="tendencyDateChange"
    ></baseData>
    <detailEcharts
      v-if="curData.operation === 'drill'"
      :xAxisData="xAxisData"
      :seriesData="seriesData"
      :dataType="headerNumberDataType"
      :titleContent="dimContent.length > 0 && dimContent[0].name"
      :echartsTitle="echartsTitle"
      :UnitLevel="UnitLevel"
    ></detailEcharts>
    <echarts-radar
      :echartsRadarData="curData.echartsRadarData"
      v-if="curData.operation === 'attribution'"
    ></echarts-radar>
    <overlapping-list
      :fields="curData.detailContent.fields"
      :filterData="curData.queryParams.filters"
      :trackParame="trackParame"
      :operation="curData.operation"
      :dataContent="dataContent"
      :UnitLevel="UnitLevel"
      :headerNumber="headerNumber"
      :queryParams="curData.queryParams"
      :echartsRadarData="curData.echartsRadarData"
      @modifyPopup="handleModifyPopup"
      @getTrendList="handleTrendList"
      @sortList="handleSortList"
      @getAttribution="getAttribution"
      @istracked_="istracked_"
      :istracked="istracked"
      :secondaryNumber="secondaryNumber"
    >
    </overlapping-list>
  </div>
</template>

<script>
import baseData from './baseData'
import detailEcharts from './detailEcharts'
import echartsRadar from './echartsRadar'
import overlappingList from './overlappingList'
import { get } from 'lodash'
import { unitFormat, getUnitLv } from '@/filters/filter'

export default {
  props: {
    curData: {
      type: Object,
      default: () => {}
    },
    tendencyData: {
      type: Object,
      default: () => {}
    },
    trackParame: {
      type: Object,
      default: () => {}
    },
    istracked: {
      type: Boolean,
      default: false
    }
  },
  components: {
    baseData,
    detailEcharts,
    overlappingList,
    echartsRadar
  },
  data() {
    return {
      fields: [], // 列表表格头部
      dataContent: [], // 列表表格值
      xAxisData: [], // echarts,xAxisData
      seriesData: [], // echarts ,seriesData
      dimContent: [], // 主指标logicCode集合
      secondaryContent: [], // 副指标logicCode集合
      headerContent: {}, // 页面头部信息
      divShow: true, // 是否展示组件
      echartsTitle: '', // echarts的头部标题
      baseTitleName: '', // 页面主指标名称+单位
      headerNumber: '', // 头部数字
      secondaryNumber: '', // 头部副参考系值
      headerNumberDataType: '', // 列表表格主指标值类型
      UnitLevel: 0, // 根据主指标值返回不同值，根据值返回不同单位，参考filter方法
      tendencyXAxisData: [], // 趋势图 XAxis
      tendencySeriesData: [] // 趋势图 Series
    }
  },
  methods: {
    istracked_() {
      this.$emit('istracked_')
    },
    handleTrendList(data, overlapingItem, refCodeData, istracked) {
      // 获取单个列表信息
      this.$emit('getIndex', data, overlapingItem, refCodeData, istracked)
    },
    handleSortList(code, fieldCode) {
      this.$emit('getSortIndex', code, fieldCode)
    },
    handleModifyPopup(isPopup, operation, buttonType) {
      this.$emit('indexModifyPopup', isPopup, operation, buttonType)
    },
    tendencyDateChange(date) {
      this.$emit('tendencyDateChange', date)
    },
    getAttribution(type) {
      this.$emit('getAttribution', type)
    }
  },
  watch: {
    curData(val) {
      // 如果首页传递的是空对象，则所有的组件不展示
      if (JSON.stringify(val.detailContent) === '{}') {
        this.divShow = false
        return
      }
      this.divShow = true

      // 数据类型,交叉不展示echarts柱状图
      const baseData = get(val.detailContent, 'data', {})
      this.headerContent = get(val.detailContent, 'header', {})
      this.fields = get(val.detailContent, 'fields', [])
      this.dataContent = get(baseData, 'content', [])

      // 初始化请求值
      this.dimContent = []
      this.secondaryContent = []
      this.xAxisData = []
      this.seriesData = []
      // 处理fields数据
      this.fields.map(item => {
        if (item.role === 'dim') {
          this.dimContent.push({ logicCode: item.logicCode, name: item.name })
        } else if (item.role === 'measure' && item.type === 'primary') {
          // 是主指标
          this.headerNumber = this.headerContent[item.logicCode]
          this.headerNumberDataType = item.dataType
          this.baseTitleName = item.name + unitFormat(this.headerContent[item.logicCode], item.dataType)
          this.UnitLevel = getUnitLv(this.headerContent[item.logicCode], item.dataType)
        } else if (item.role === 'measure') {
          this.secondaryContent.push({
            logicCode: item.logicCode,
            type: item.type,
            name: item.name,
            dataType: item.dataType
          })
          if (item.type === 'secondary') {
            this.secondaryNumber = this.headerContent[item.logicCode]
            this.$emit('secondaryNumber', this.secondaryNumber)
          }
        }
      })

      // echarts准备的数据。
      for (let i = 0; i < this.fields.length; i++) {
        if (this.fields[i].role === 'measure' && this.fields[i].type === 'primary') {
          this.echartsTitle = this.fields[i].name
          for (let j = 0; j < this.dataContent.length; j++) {
            this.xAxisData.push(this.dataContent[j][this.dimContent[0].logicCode])
            this.seriesData.push(this.dataContent[j][this.fields[i].logicCode])
          }
        }
      }
    },
    tendencyData(val) {
      this.tendencyXAxisData = get(val, 'xaxis', [])
      this.tendencySeriesData = get(val, 'data', [])
    }
  }
}
</script>
